<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>会员注册</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 20px;
        }
        
        .form-container {
            width: 600px; /* 固定表单宽度，便于对齐 */
        }
        
        .form-title {
            color: #0066cc;
            font-size: 18px;
            margin: 0 0 20px 90px; /* 与表单项对齐 */
            font-weight: bold; /* 标题加粗 */
        }
        
        .form-group {
            height: 30px; /* 固定行高，确保垂直对齐 */
            margin-bottom: 12px; /* 统一行间距 */
            display: flex;
            align-items: center; /* 垂直居中对齐 */
        }
        
        /* 标签严格对齐 */
        .form-label {
            width: 90px; /* 固定标签宽度 */
            text-align: right;
            padding-right: 10px; /* 标签与输入框间距 */
            box-sizing: border-box;
            float: left;
            font-weight: bold; /* 标签标题加粗 */
        }
        
        /* 输入区域容器 */
        .input-container {
            float: left;
            height: 30px;
            display: flex;
            align-items: center;
        }
        
        /* 统一输入控件样式 */
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        select {
            width: 200px;
            height: 28px;
            padding: 0 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 14px;
        }
        
        /* 籍贯下拉框特殊样式 - 大小相等且总宽度与其他输入框一致 */
        .province-select, .city-select {
            width: 97.5px !important; /* 两个下拉框大小相等 */
        }
        
        /* 验证码区域 */
        .captcha-container {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        #captchaText {
            width: 60px;
            height: 28px;
            background-color: #e6e6fa; /* 淡紫色背景（与参考图一致） */
            color: #000; /* 黑色文字 */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            letter-spacing: 2px;
            font-style: italic; /* 斜体字体 */
            border: 1px solid #d3d3d3; /* 浅灰色边框 */
        }
        
        #refreshCaptcha {
            width: 28px;
            height: 28px;
            border: 1px solid #ccc;
            border-radius: 50%; /* 圆形边框（模拟参考图样式） */
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background-color: #fff; /* 白色背景 */
        }
        
        /* 性别选项间距优化 */
        .gender-option {
            margin-right: 15px; /* 减小男女选项间距 */
        }
        
        .gender-option input {
            margin-right: 3px;
        }
        
        /* 月薪滑块区域 */
        .salary-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        #salary {
            width: 150px;
        }
        
        #salaryValue {
            width: 50px;
            text-align: center;
        }
        
        /* 爱好选项 */
        .hobby-option {
            margin-right: 15px;
        }
        
        .hobby-option input {
            margin-right: 3px;
        }
        
        /* 照片预览 */
        .photo-preview {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 5px 0 15px 100px; /* 与输入框左对齐 */
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .photo-preview img {
            max-width: 100%;
            max-height: 100%;
        }
        
        /* 个人简介 */
        .intro-container {
            display: flex;
            margin-bottom: 15px;
        }
        
        textarea {
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
            padding: 5px;
            box-sizing: border-box;
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
        }
        
        /* 按钮区域 */
        .button-group {
            margin-left: 100px; /* 与输入框左对齐 */
            margin-top: 10px;
        }
        
        button {
            width: 80px;
            height: 30px;
            margin-right: 20px;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #f5f5f5;
            font-size: 14px;
            font-weight: bold; /* 按钮文字加粗 */
        }
        
        button:hover {
            background-color: #e9e9e9;
        }
        
        /* 必填项标记 */
        .required {
            color: #ff0000;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div class="form-container">
        <h3 class="form-title">欢迎注册会员</h3>
        
        <form action="" method="post">
            <!-- 手机号码 -->
            <div class="form-group">
                <label class="form-label" for="phone">手机号码：</label>
                <div class="input-container">
                    <input type="tel" id="phone" placeholder="11位手机号" required>
                    <span class="required">必填</span>
                </div>
            </div>
            
            <!-- 创建密码 -->
            <div class="form-group">
                <label class="form-label" for="pwd">创建密码：</label>
                <div class="input-container">
                    <input type="password" id="pwd" placeholder="8位密码" required>
                    <span class="required">必填</span>
                </div>
            </div>
            
            <!-- 注册邮箱 -->
            <div class="form-group">
                <label class="form-label" for="email">注册邮箱：</label>
                <div class="input-container">
                    <input type="email" id="email" placeholder="例如:wustzz@sina.com" required>
                    <span class="required">必填</span>
                </div>
            </div>
            
            <!-- 验证码 -->
            <div class="form-group">
                <label class="form-label" for="captcha">验证码：</label>
                <div class="input-container captcha-container">
                    <input type="text" id="captcha" placeholder="请输入验证码" required>
                    <span id="captchaText">UJFG</span>
                    <!-- 使用Font Awesome的刷新图标 -->
                    <span id="refreshCaptcha"><i class="fas fa-sync"></i></span>
                </div>
            </div>
            
            <!-- 性别 -->
            <div class="form-group">
                <label class="form-label">性别：</label>
                <div class="input-container">
                    <div class="gender-option">
                        <input type="radio" name="gender" id="male" value="male" checked>
                        <label for="male">男</label>
                    </div>
                    <div class="gender-option">
                        <input type="radio" name="gender" id="female" value="female">
                        <label for="female">女</label>
                    </div>
                </div>
            </div>
            
            <!-- 生日 -->
            <div class="form-group">
                <label class="form-label" for="birthday">生日：</label>
                <div class="input-container">
                    <input type="text" id="birthday" placeholder="年/月/日">
                </div>
            </div>
            
            <!-- 年龄 -->
            <div class="form-group">
                <label class="form-label" for="age">年龄：</label>
                <div class="input-container">
                    <input type="text" id="age">
                </div>
            </div>
            
            <!-- 籍贯 -->
            <div class="form-group">
                <label class="form-label">籍贯：</label>
                <div class="input-container">
                    <select name="province" id="province" class="province-select">
                        <option value="hubei">湖北省</option>
                        <option value="hunan">湖南省</option>
                        <option value="guangdong">广东省</option>
                    </select>
                    <select name="city" id="city" class="city-select" style="margin-left: 5px;">
                        <option value="wuhan">武汉</option>
                        <option value="huangshi">黄石</option>
                        <option value="yichang">宜昌</option>
                    </select>
                </div>
            </div>
            
            <!-- 个人学历 -->
            <div class="form-group">
                <label class="form-label">个人学历：</label>
                <div class="input-container">
                    <select name="education" id="education">
                        <option value="bachelor">本科</option>
                        <option value="master">硕士</option>
                        <option value="doctor">博士</option>
                        <option value="highSchool">高中</option>
                    </select>
                </div>
            </div>
            
            <!-- 月薪（最高上限为10000） -->
            <div class="form-group">
                <label class="form-label">月薪：</label>
                <div class="input-container salary-container">
                    <input type="range" id="salary" min="0" max="10000" value="5000">
                    <span id="salaryValue">5000</span>
                </div>
            </div>
            
            <!-- 个人爱好 -->
            <div class="form-group">
                <label class="form-label">个人爱好：</label>
                <div class="input-container">
                    <div class="hobby-option">
                        <input type="checkbox" name="hobby" value="sing">唱歌
                    </div>
                    <div class="hobby-option">
                        <input type="checkbox" name="hobby" value="run">跑步
                    </div>
                    <div class="hobby-option">
                        <input type="checkbox" name="hobby" value="swim">游泳
                    </div>
                </div>
            </div>
            
            <!-- 个人照片 -->
            <div class="form-group">
                <label class="form-label">个人照片：</label>
                <div class="input-container">
                    <input type="file" id="photo" accept="image/*">
                </div>
            </div>
            <div id="photoPreview" class="photo-preview"></div>
            
            <!-- 个人简介 -->
            <div class="intro-container">
                <label class="form-label">个人简介：</label>
                <textarea name="intro" id="intro"></textarea>
            </div>
            
            <!-- 按钮 -->
            <div class="button-group">
                <button type="submit">提交</button>
                <button type="reset">重填</button>
            </div>
        </form>
    </div>

    <script>
        // 生成随机验证码（4位，数字+大小写字母混合）
        function generateCaptcha() {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars[Math.floor(Math.random() * chars.length)];
            }
            return captcha;
        }
        
        const captchaText = document.getElementById('captchaText');
        captchaText.textContent = generateCaptcha(); // 初始化验证码
        
        // 刷新验证码
        document.getElementById('refreshCaptcha').addEventListener('click', () => {
            captchaText.textContent = generateCaptcha();
        });
        
        // 月薪滑块实时显示值
        const salaryInput = document.getElementById('salary');
        const salaryValue = document.getElementById('salaryValue');
        salaryInput.addEventListener('input', () => {
            salaryValue.textContent = salaryInput.value;
        });
        
        // 个人照片预览
        const photoInput = document.getElementById('photo');
        const photoPreview = document.getElementById('photoPreview');
        photoInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    photoPreview.style.display = 'flex';
                    photoPreview.innerHTML = `<img src="${event.target.result}" alt="照片预览">`;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>